<template>
	<view class="consult">
		<u-navbar ref="navbarRef" class="van-nav-bar" :placeholder="true" title="咨询师详情" @leftClick="leftClick" :autoBack="false"></u-navbar>
		<scroll-view :style="{ height: domHeight }" class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
			<view class="per-wrap">
				<view class="bg"></view>
				<!-- <image class="bg" :src="$buildFullImageUrl('/static/consult/consult-head-bg.png')"></image> -->
				<view class="con">
					<view>
						<image v-if="dataDetail.avatarUrl" :src="$fullImageUrl(dataDetail.avatarUrl)"></image>
					</view>
					<view>
						<view class="top">
							<text>{{ dataDetail.expertName }}</text>
							<view>
								<image :src="$buildFullImageUrl('/static/consult/address.svg')"></image>
								<text>{{ dataDetail.cityCopy }}</text>
							</view>
						</view>
						<view class="mid">{{ dataDetail.title }}</view>
						<view class="bot">
							<view>
								<text>时长：</text>
								<text style="font-weight: bold; color: #666">{{ dataDetail.totalConsultHours }}</text>
								<text>+</text>
							</view>
							<view>
								<text>从业：</text>
								<text style="font-weight: bold; color: #666">{{ dataDetail.workingYears }}</text>
								<text>年</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="tab-wrap">
					<image :src="$buildFullImageUrl('/static/consult/guarantees.png')"></image>
					<view>
						<text>经验丰富</text>
						<view></view>
						<text>隐私安全有保证</text>
						<view></view>
						<text>快速回应</text>
					</view>
				</view> -->
			</view>
			<view class="container">
				<view class="person">
					<view>
						<image :src="$buildFullImageUrl('/static/consult/person.svg')"></image>
						<text>个人简介</text>
					</view>
					<view>资质介绍</view>
					<view>{{ dataDetail.title }}</view>
					<view v-html="dataDetail.introduction"></view>
					<view>
						<view>专家寄语</view>
						<view>{{ dataDetail.expertSaying }}</view>
					</view>
				</view>
				<view class="direction">
					<view>
						<image :src="$buildFullImageUrl('/static/consult/consult-dir.svg')"></image>
						<text>咨询方向</text>
					</view>
					<view>
						<view>擅长领域</view>
						<view class="mid" v-for="(item, index) in dataDetail.texpertDomainList" :key="index">
							<view>
								<view>
									<image :src="$fullImageUrl(item.avatarUrl)"></image>
								</view>
								<text>{{ item.domainName }}</text>
							</view>
							<view>{{ item.domainDescribe }}</view>
						</view>
					</view>
					<view class="det-box">
						<view>擅长人群</view>
						<view>
							<view v-for="(item, index) in dataDetail.crowdName" :key="index">{{ item }}</view>
						</view>
					</view>
					<view class="det-box">
						<view>擅长流派</view>
						<view>
							<view v-for="(item, index) in dataDetail.texpertSchoolList" :key="index">
								{{ item.schoolName }}
							</view>
						</view>
					</view>
				</view>
				<view class="exper">
					<view>
						<image :src="$buildFullImageUrl('/static/consult/ins.svg')"></image>
						<text>教育与进修经历</text>
					</view>
					<!-- <view>资质介绍</view>
					<view>中科院心理所·硕士研究生·医学心理与健康</view> -->
					<view class="det-box">
						<view>教育经历</view>
						<view>
							<view v-for="(item, index) in dataDetail.texpertEducationList" :key="index">
								<view class="top-box">
									<view>
										<view></view>
									</view>
									<view>{{ item.institution }}</view>
								</view>
								<view v-if="dataDetail.texpertEducationList && dataDetail.texpertEducationList.length > index + 1" class="mid-box"></view>
							</view>
						</view>
					</view>
					<view class="det-box">
						<view>进修经历</view>
						<view>
							<view v-for="(item, index) in dataDetail.texpertTrainingList" :key="index">
								<view class="top-box">
									<view>
										<view></view>
									</view>
									<view>{{ item.trainingName }}</view>
								</view>
								<view v-if="dataDetail.texpertTrainingList && dataDetail.texpertTrainingList.length > index + 1" class="mid-box"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="pos"></view> -->
			</view>
			<!-- <view v-if="fromPage !== 'subset/pages/consult/search/consultDetail'" style="height: 166rpx; width: 100%; padding: 24rpx 30rpx 58rpx 32rpx"></view> -->
			<!-- 		<view class="bot-wrap" v-if="fromPage !== 'subset/pages/consult/search/consultDetail'">
				<view>
				</view>
				<view @click="handelAttent" v-if="!isAttent" class="attation">关注</view>
				<view v-if="isAttent" class="attation">已关注</view>
			</view> -->
		</scroll-view>

		<!-- 	<u-popup :show="show" mode="bottom">
			<view class="popupWrap">
				<view class="pop-top">
					<agree-book-vue></agree-book-vue>
				</view>
				<view class="pop-bot">
					<view @click="againSay">稍后再说</view>
					<view @click="iAgree">我同意</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
import { getExpert, getAttentionExpertList, setExpertUser } from '@/api/consult/index.js';
import config from '@/config';
import agreeBookVue from './cnps/agreeBook.vue';
import { getLastPartAfterLastComma } from '@/utils/common.js';
export default {
	data() {
		return {
			domHeight: '',
			dataDetail: {},
			isAttent: false,
			id: 0,
			show: false,
			fromPage: ''
		};
	},
	components: {
		agreeBookVue
	},
	onLoad(options) {
		const pages = getCurrentPages();
		if (pages.length > 1) {
			const prevPage = pages[pages.length - 2];
			this.fromPage = prevPage.route;
			console.log(this.fromPage);
		}

		this.id = options.id;

		getExpert(options.id).then((res) => {
			// console.log(res);
			this.dataDetail = res.data;
			// this.dataDetail.avatarUrl = config.baseUrl + this.dataDetail.avatarUrl;
			this.dataDetail.crowdName = this.dataDetail.crowdName.split(',');
			this.dataDetail.cityCopy = getLastPartAfterLastComma(this.dataDetail.city);
			// this.dataDetail.texpertDomainList.map((i) => {
			// 	i.avatarUrl = config.baseUrl + i.avatarUrl;
			// });
			if (this.dataDetail.attentionStatus == '0') {
				this.isAttent = true;
			} else {
				this.isAttent = false;
			}
		});
	},
	methods: {
		againSay() {
			this.show = false;
		},
		iAgree() {
			uni.removeStorageSync('recordId');
			uni.removeStorageSync('consultData');
			this.show = false;
			this.$tab.navigateTo(`/subset/pages/consult/consultOrder/consultOrder?id=${this.id}`);
		},
		//立即预约
		startAppoint() {
			// this.show = true;
		},
		handelAttent() {
			let obj = {
				attentionStatus: '',
				expertId: this.id * 1,
				userId: uni.getStorageSync('user_id')
			};
			if (this.isAttent) {
				obj.attentionStatus = '1';
				setExpertUser(obj).then((res) => {
					this.$modal.showToast('已取消关注');
					this.isAttent = false;
				});
			} else {
				obj.attentionStatus = '0';
				setExpertUser(obj).then((res) => {
					this.$modal.showToast('已关注');
					this.isAttent = true;
				});
			}
		},
		leftClick() {
			// uni.switchTab({
			// 	url: '/pages/consult/index'
			// });

			if (this.fromPage === 'pages/index') {
				this.$tab.switchTab('/pages/index');
			} else if (this.fromPage === 'pages/consult/index') {
				this.$tab.switchTab('/pages/consult/index');
			} else if (
				this.fromPage === 'subset/pages/consult/search/index' ||
				this.fromPage === 'subset/pages/consult/search/myAttent' ||
				this.fromPage === 'subset/pages/consult/search/consultDetail'
			) {
				uni.navigateBack();
			} else {
				this.$tab.switchTab('/pages/consult/index');
			}
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		let statusBarHeight = systemInfo.statusBarHeight || 20;
		// 示例计算公式（具体需根据组件实现调整）
		const height = statusBarHeight + 44 + 'px'; // 状态栏高度 + 导航栏内容高度
		this.domHeight = `calc(100% - ${height})`;
	}
};
</script>

<style scoped lang="scss">
.consult {
	width: 100%;
	height: 100%;
	background-color: #f5f4f8;
	overflow: hidden;
	.popupWrap {
		width: 100%;
		height: 800rpx;
		position: relative;
		.pop-top {
			position: absolute;
			top: 0;
			width: 100%;
			height: calc(100% - 166rpx);
			overflow-y: auto;
		}
		.pop-bot {
			width: 100%;
			height: 166rpx;
			background: rgba(255, 255, 255, 1);
			position: fixed;
			bottom: 0;
			padding: 24rpx 30rpx 58rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			> view {
				width: 55%;
				height: 84rpx;
				text-align: center;
				line-height: 84rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				background: #76a26f;
				border-radius: 42rpx;
			}
			> view:nth-child(1) {
				width: 40% !important;
				color: #000 !important;
				background: #ebebeb !important;
			}
		}
	}
	.scrollWrap {
		width: 100%;
		height: 100%;
	}

	.per-wrap {
		width: 100%;
		height: 390rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: linear-gradient(127deg, #a4dcb3 0%, #ffeed6 37%, #d3fffb 100%);
		}

		.con {
			width: 100%;
			height: 336rpx;
			position: absolute;
			left: 0;
			top: 20rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			> view:nth-child(1) {
				width: 208rpx;
				height: 256rpx;
				border-radius: 20rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			> view:last-child {
				width: calc(100% - 208rpx);
				height: 100%;
				padding: 26rpx 0 2rpx 20rpx;
				box-sizing: border-box;
				position: relative;

				.top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					> text:nth-child(1) {
						font-weight: bold;
						font-size: 32rpx;
						color: #666;
					}

					> view:last-child {
						display: flex;
						align-items: center;

						image {
							width: 26rpx;
							height: 25rpx;
						}

						text {
							font-weight: 400;
							font-size: 24rpx;
							color: #666;
							margin-left: 6rpx;
						}
					}
				}

				.mid {
					font-weight: 400;
					font-size: 26rpx;
					color: #666;
					margin-top: 20rpx;
				}

				.bot {
					position: absolute;
					width: 100%;
					bottom: 25rpx;
					display: flex;
					align-items: center;

					> view {
						margin-right: 26rpx;
						border-radius: 18rpx;
						// border: 2rpx solid #ffffff;
						font-weight: 400;
						font-size: 22rpx;
						color: #666;
						padding: 4rpx 8rpx;
					}
				}
			}
		}

		.tab-wrap {
			width: 100%;
			height: 71rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background: #d9eaff;
			display: flex;

			image {
				width: 176rpx;
				height: 100%;
			}

			> view {
				width: calc(100% - 176rpx);
				height: 100%;
				padding: 0 40rpx 0 26rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #0c2f48;
				}

				> view {
					width: 2rpx;
					height: 22rpx;
					background: #0c2f48;
				}
			}
		}

		// height: ;
	}

	.container {
		width: 100%;
		padding: 22rpx 30rpx 24rpx 32rpx;
		box-sizing: border-box;

		.person {
			width: 100%;
			padding: 0 18rpx 56rpx 32rpx;
			box-sizing: border-box;
			background: linear-gradient(146deg, #d9ecff 5%, #ffffff 10%);
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			> view {
				width: 100%;
			}

			> view:nth-child(1) {
				height: 92rpx;
				border-bottom: 2rpx solid #ebebeb;
				padding-top: 40rpx;
				padding-bottom: 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-left: 6rpx;
				}
			}

			> view:nth-child(2) {
				padding: 24rpx 0;
				font-weight: bold;
				font-size: 26rpx;
				color: #333333;
			}

			> view:nth-child(3) {
				font-weight: 400;
				font-size: 26rpx;
				color: #0c2f48;
				margin-bottom: 24rpx;
			}

			> view:nth-child(4) {
				padding: 24rpx 18rpx 24rpx 32rpx;
				background: #fafafa;
				border-radius: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #9d9d9d;
			}

			> view:last-child {
				> view:nth-child(1) {
					padding: 24rpx 0;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}

				> view:nth-child(2) {
					padding: 24rpx 18rpx 24rpx 32rpx;
					background: #fafafa;
					border-radius: 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #9d9d9d;
				}
			}
		}

		.direction {
			width: 100%;
			padding: 0 18rpx 56rpx 32rpx;
			box-sizing: border-box;
			background: linear-gradient(146deg, #ffedd5 5%, #ffffff 10%);
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			> view {
				width: 100%;
			}

			> view:nth-child(1) {
				height: 92rpx;
				border-bottom: 2rpx solid #ebebeb;
				padding-top: 40rpx;
				padding-bottom: 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-left: 6rpx;
				}
			}

			> view:nth-child(2) {
				width: 100%;

				> view:nth-child(1) {
					padding: 24rpx 0;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}

				.mid {
					width: 100%;
					padding-left: 40rpx;
					box-sizing: border-box;

					> view:nth-child(1) {
						width: 100%;
						display: flex;
						align-items: center;
						padding-top: 24rpx;

						> view {
							width: 44rpx;
							height: 44rpx;
							background: rgba(255, 147, 0, 0.1);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 25rpx;
								height: 25rpx;
							}
						}

						> text {
							font-weight: 400;
							font-size: 26rpx;
							color: #0c2f48;
							margin-left: 22rpx;
						}
					}

					> view:nth-child(2) {
						width: 100%;
						padding-left: 68rpx;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 20rpx;
						color: #9d9d9d;
						margin-top: 12rpx;
					}
				}
			}

			.det-box {
				width: 100%;

				> view:nth-child(1) {
					padding: 24rpx 0;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}

				> view:nth-child(2) {
					padding: 0 6rpx;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					align-items: center;

					> view {
						padding: 0 24rpx;
						height: 42rpx;
						line-height: 42rpx;
						background: #fafafa;
						border-radius: 20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #9d9d9d;
						margin-right: 12rpx;
					}
				}
			}
		}

		.direction {
			width: 100%;
			padding: 0 18rpx 56rpx 32rpx;
			box-sizing: border-box;
			background: linear-gradient(146deg, #ffedd5 5%, #ffffff 10%);
			border-radius: 20rpx;
			margin-bottom: 24rpx;

			> view {
				width: 100%;
			}

			> view:nth-child(1) {
				height: 92rpx;
				border-bottom: 2rpx solid #ebebeb;
				padding-top: 40rpx;
				padding-bottom: 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-left: 6rpx;
				}
			}

			> view:nth-child(2) {
				width: 100%;

				> view:nth-child(1) {
					padding: 24rpx 0;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}

				.mid {
					width: 100%;
					padding-left: 40rpx;
					box-sizing: border-box;

					> view:nth-child(1) {
						width: 100%;
						display: flex;
						align-items: center;
						padding-top: 24rpx;

						> view {
							width: 44rpx;
							height: 44rpx;
							background: rgba(255, 147, 0, 0.1);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 25rpx;
								height: 25rpx;
							}
						}

						> text {
							font-weight: 400;
							font-size: 26rpx;
							color: #0c2f48;
							margin-left: 22rpx;
						}
					}

					> view:nth-child(2) {
						width: 100%;
						padding-left: 68rpx;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 20rpx;
						color: #9d9d9d;
						margin-top: 12rpx;
					}
				}
			}

			.det-box {
				width: 100%;

				> view:nth-child(1) {
					padding: 24rpx 0 0 0;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
				}

				> view:nth-child(2) {
					padding: 0 6rpx;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					> view {
						padding: 0 24rpx;
						height: 42rpx;
						line-height: 42rpx;
						background: #fafafa;
						border-radius: 20rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #9d9d9d;
						margin-right: 12rpx;
						margin-top: 24rpx;
					}
				}
			}
		}

		.exper {
			width: 100%;
			padding: 0 18rpx 56rpx 32rpx;
			box-sizing: border-box;
			background: linear-gradient(146deg, #e2ffff 5%, #ffffff 10%);
			border-radius: 20rpx;

			// margin-bottom: 24rpx;
			> view {
				width: 100%;
			}

			> view:nth-child(1) {
				height: 92rpx;
				border-bottom: 2rpx solid #ebebeb;
				padding-top: 40rpx;
				padding-bottom: 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				text {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-left: 6rpx;
				}
			}

			// > view:nth-child(2) {
			// 	padding: 48rpx 0rpx 32rpx 0;
			// 	box-sizing: border-box;
			// 	font-weight: bold;
			// 	font-size: 26rpx;
			// 	color: #333333;
			// 	width: 100%;
			// }
			// > view:nth-child(3) {
			// 	padding-left: 30rpx;
			// 	box-sizing: border-box;
			// 	font-weight: 400;
			// 	font-size: 26rpx;
			// 	color: #0c2f48;
			// 	width: 100%;
			// }
			.det-box {
				> view:nth-child(1) {
					padding: 48rpx 0rpx 32rpx 0;
					box-sizing: border-box;
					font-weight: bold;
					font-size: 26rpx;
					color: #333333;
					width: 100%;
				}

				> view:last-child {
					width: 100%;
					padding-left: 20rpx;
					box-sizing: border-box;

					.top-box {
						width: 100%;
						display: flex;
						align-items: center;

						> view:nth-child(1) {
							width: 20rpx;
							height: 20rpx;
							background: #ffffff;
							border-radius: 50%;
							border: 2rpx solid #e7e7e7;
							display: flex;
							justify-content: center;
							align-items: center;

							> view {
								width: 8rpx;
								height: 8rpx;
								background: #c1c1c1;
								border-radius: 50%;
							}
						}

						> view:last-child {
							width: calc(100% - 36rpx);
							font-weight: 400;
							font-size: 22rpx;
							color: #0c2f48;
							margin-left: 16rpx;
						}
					}

					.mid-box {
						width: calc(100% - 10rpx);
						height: 54rpx;
						border-left: 4rpx dashed #ebebeb;
						margin-left: 8rpx;
					}
				}
			}
		}

		.pos {
			width: 100%;
			height: 166rpx;
		}
	}

	.bot-wrap {
		width: 100%;
		height: 166rpx;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		padding: 24rpx 30rpx 58rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		> view:nth-child(1) {
			// width: 50rpx;
			// font-synthesis-weight: 166rpx;
			// margin-right: 32rpx;
			// display: flex;
			// flex-wrap: wrap;
			// align-items: center;
			// justify-content: center;

			// image {
			// 	width: 36rpx;
			// 	height: 36rpx;
			// }

			// > view {
			// 	width: 100%;
			// 	color: #0c2f48;
			// 	font-size: 20rpx;
			// 	text-align: center;
			// 	margin-top: 4rpx;
			// }
		}

		.setAttent {
			width: 60rpx !important;

			> view {
				width: 100%;
				color: #8a8a8a !important;
			}
		}

		.attation {
			width: 600rpx;
			margin: auto;
			height: 84rpx;
			text-align: center;
			line-height: 84rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #ffffff;
			background: #76a26f;
			border-radius: 42rpx;
		}
	}
}
</style>
